<template>
	<view class="content">
		<view class="comment-list-plate-box">
			<view class="title-box"><text>评价({{info.count}})</text></view>
			<view class="comment-item-plate-box" v-for="(item,index) in info.list" :key="index">
				<view class="user-info-box">
					<view class="user-head-box">
						<image :src="item.avatar" mode=""></image>
					</view>
					<view class="user-name-box">
						<text>{{item.nickname}}</text>
						<u-rate disabled :count="count" size="25" active-color="#FCC526" v-model="item.star"></u-rate>
					</view>
				</view>
				<view class="user-comment-box">
					<text>{{item.content}}</text>
				</view>
				<view class="user-img-box">
					<block v-for="(items, indexs) in item.image" :key="items.id">
						<image :src="items.path" @click="bindImgPreview(items.path, item.image)" mode=""></image>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				id: '',
				count: 5,
				info: {},
			}
		},
		onLoad(options) {
			const { id } = options
			this.id = id || ''
			this.getList()
		},
		methods:{
			// 获取评论列表
			getList: async function () {
				uni.showLoading({ title: '加载中' })
				const { id } = this
				const { code, data, message } = await this.$u.api.getEvaluateHallLst({ id })
				if (code == '1') {
					console.log('评论列表', data)
					this.info = data
				} else {
					this.$showToast(message || '获取评论列表失败')
				}
			},
			bindImgPreview(current, list){ //图片预览
				const urls = list.map(item => item.path)
				uni.previewImage({
					current,
					urls
				})
			},
		},
		onReachBottom(){
			console.log("nihao");
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;height: 100vh;
		font-family: Microsoft YaHei;
		box-sizing: border-box;
		padding-top: 20rpx;
		.comment-list-plate-box{
			padding: 30rpx 20rpx;
			.title-box{
				width: 100%;
				position: fixed;top: 0;z-index: 100;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				background: #fff;
				padding: 20rpx 0 20rpx 0;
			}
			.comment-item-plate-box{
				padding: 40rpx 0;
				padding-bottom: 0;
				.user-info-box{
					width: 100%;
					display: flex;
					.user-head-box{
						flex: 0.13;
						line-height: 0;
						image{width: 70rpx;height: 70rpx;border-radius: 50rpx;}
					}
					.user-name-box{
						flex: 0.87;
						font-size: 26rpx;
						font-weight: bold;
						color: #333333;
						display: flex;
						flex-direction: column;
					}
				}
				.user-comment-box{
					padding: 20rpx 0;
					font-size: 26rpx;
					font-weight: bold;
					color: #333333;
				}
				.user-img-box{
					display: flex;flex-wrap: wrap;
					line-height: 0;
					image{width: 167rpx;height: 167rpx;border-radius: 10rpx;margin: 0 10rpx 10rpx 0;}
				}
			}
		}
	}
</style>